<template>
    <div class="wrapper">
        <!--头部-->
        <header>
            <p>确认菜单</p>
        </header>
        <!--订单信息-->
        <div class="order-info">
            <h5>订单配送至:</h5>
            <div class="address" @click="toUserAddress">
                <p>{{ deliveryAddress != null ? deliveryAddress.address : '请选择送货地址' }}</p>
                <i class="fa fa-angle-right"></i>
            </div>
            <p v-if="this.deliveryAddress!=null">{{
                this.deliveryAddress.contactName
                }}{{ this.deliveryAddress.contactSex| sexFilter }}
                {{ this.deliveryAddress.contactTel }}</p>
        </div>

        <h3>{{ business.businessName }}</h3>

        订单明细
        <ul class="order-detailed">
            <li v-for="item in foodArrInCart ">
                <div class="left">
                    <img :src="item.foodImg">
                    <p>{{ item.foodName }} × {{ item.quantity }}</p>
                </div>
                <p>&#165;{{ item.foodPrice * item.quantity }}</p>
            </li>
        </ul>
        <div class="deliveryfee">
            <p>配送费</p>
            <p>&#165;{{ business.deliveryPrice }}</p>
        </div>
        <!--合计部分-->
        <div class="total">
            <div class="left">
                <p>&#165;{{ totalPrice }}</p>
            </div>
            <div class="right" @click="toPayment">
                去支付
            </div>
        </div>
    </div>
</template>

<script>
import {useRoute, useRouter} from "vue-router";

let route, router

export default {
    name: "Orders",
    data() {
        route = useRoute()
        router = useRouter()
        return {
            // businessId: route.query.business.businessId,
            business: this.$getSessionStorage('business'),
            user: {},
            foodArrInCart: [],
            deliveryAddress: this.$getLocalStorage('defaultaddress')
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        const cartArr = this.$getSessionStorage('cartArr')
        const foodArr = this.$getSessionStorage('foodArr')
        this.foodArrInCart = foodArr.filter(item => cartArr.some(obj => obj.foodId === item.foodId))
        //查询当前商家
        // let business_url = `business/${this.businessId}`;
        // this.$axios.get(business_url).then(response => {
        //   this.business = response.data.data;
        // }).catch(error => {
        //   console.error(error);
        // });
        //查询当前用户在当前商家的购物车
        //TODO
        // let cart_url = `cart/${this.user.userId}`;
        // this.$axios.get(cart_url, {
        //     params: {
        //         businessId: this.businessId
        //     }
        // }).then(response => {
        //     this.cartArr = response.data.data;
        // }).catch(error => {
        //     console.error(error);
        // });
    },
    computed: {
        totalPrice() {
            let totalPrice = 0;
            for (let item of this.foodArrInCart) {
                totalPrice += item.foodPrice * item.quantity;
            }
            totalPrice += this.business.deliveryPrice;
            return totalPrice;
        }
    },
    filters: {
        sexFilter(value) {
            return value === 1 ? '先生' : '女士';
        }
    },
    methods: {
        //跳转到userAddress页面
        toUserAddress() {
            router.push({path: '/userAddress', query: {businessId: this.businessId}});
        },
        //跳转到payment页面
        toPayment() {
            //如果没有选择地址，弹出alert
            if (this.deliveryAddress == null) {
                alert('请选择送货地址！');
                return;
            }
            //创建订单
            let url = 'order';
            this.$axios.post(url, {
                userId: this.user.userId,
                businessId: this.business.businessId,
                orderTotal: this.totalPrice,
                daId: this.deliveryAddress.daId,
                orderDetailList: this.foodArrInCart.map(item => ({
                    foodId: item.foodId,
                    quantity: item.quantity
                }))
            }).then(response => {
                let orderId = response.data.data;
                //创建成功去payment页面
                if (orderId > 0) {
                    router.push({path: '/payment', query: {orderId: orderId}});
                } else {
                    alert('创建订单失败！');
                }
            }).catch(error => {
                console.error(error);
            });
        }
    }
}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper {
    width: 100%;
    height: 100%;
}

/**************************header**************************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #FFF;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

/**************************订单信息**************************/
.wrapper .order-info {
    width: 100%;
    margin-top: 12vw;
    background-color: #0097EF;
    box-sizing: border-box;
    padding: 2vw;
    color: #fff;
}

.wrapper .order-info h5 {
    font-size: 3vw;
    font-weight: 300;
}

.wrapper .order-info .address {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-weight: 700;
    user-select: none;
    cursor: pointer;
    margin: 1vw 0;
}

.wrapper .order-info .address p {
    width: 90%;
    font-size: 5vw;
}

.wrapper .order-info .address i {
    font-size: 6vw;
}

.wrapper .order-info p {
    font-size: 3vw;
}

.wrapper h3 {
    box-sizing: border-box;
    padding: 3vw;
    font-size: 4vw;
    color: #666;
    border-bottom: solid 1px #DDD;
}

/**************************订单明细**************************/
.wrapper .order-detailed {
    width: 100%;
}

.wrapper .order-detailed li {
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .order-detailed li .left {
    display: flex;
    align-items: center;
}

.wrapper .order-detailed li .left img {
    width: 10vw;
    height: 10vw;
}

.wrapper .order-detailed li .left p {
    font-size: 3.5vw;
    margin-left: 3vw;
}

.wrapper .order-detailed li p {
    font-size: 3.5vw;
}

.wrapper .deliveryfee {
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    font-size: 3.5vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/**************************订单合计**************************/
.wrapper .total {
    width: 100%;
    height: 14vw;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
}

.wrapper .total .left {
    flex: 2;
    background-color: #505051;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .total .right {
    flex: 1;
    background-color: #38CA73;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}
</style>